<template>
  <div class="banner" :style="{
    backgroundColor: config.pageConfig.color,
  }">
    <div :style="{
      marginTop: config.pageConfig.marginTop + 'px',
      marginBottom: config.pageConfig.marginBottom + 'px',
      marginLeft: config.pageConfig.margin + 'px',
      marginRight: config.pageConfig.margin + 'px',
    }">
      <div class="img" :class="config.pageConfig.style == 2 ? 'shadow-style' : ''" :style="
        config.pageConfig.style == 3
          ? {
            borderTopLeftRadius: config.pageConfig.radiusTop + 'px',
            borderTopRightRadius: config.pageConfig.radiusTop + 'px',
            borderBottomLeftRadius: config.pageConfig.radiusBottom + 'px',
            borderBottomRightRadius: config.pageConfig.radiusBottom + 'px',
            borderColor: config.pageConfig.borderColor,
            borderWidth: config.pageConfig.borderWidth + 'px',
            backgroundColor: config.pageConfig.componentcolor,
          }
          : {
            borderTopLeftRadius: config.pageConfig.radiusTop + 'px',
            borderTopRightRadius: config.pageConfig.radiusTop + 'px',
            borderBottomLeftRadius: config.pageConfig.radiusBottom + 'px',
            borderBottomRightRadius: config.pageConfig.radiusBottom + 'px',
            backgroundColor: config.pageConfig.componentcolor,
          }
      ">
        <div v-html="config.pageConfig.content"></div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: "Richtext",
};
</script>
<script lang="ts" setup>
import { reactive, onMounted } from "vue";
const config = defineProps({
  pageConfig: {
    type: Object,
    default: {
      style: "1",
      color: "transparent",
      componentcolor: "transparent",
      content: "进入富文本编辑框编辑内容",
      marginTop: 0,
      marginBottom: 0,
      margin: 10,
      radiusTop: 0,
      radiusBottom: 0,
      borderColor: "transparent",
      borderWidth: 1,
    },
  },
});
let emits = defineEmits<{ (e: "close", flag: boolean): void }>();
</script>
<style lang="scss" scoped>
.banner {
  width: 100%;
  overflow: hidden;
}

.img {
  width: 100%;
  overflow: hidden;
  position: relative;
  border: 1px solid transparent;

  >div {
    width: 100%;

    :deep(img) {
      width: 100%;
    }
  }
}

.shadow-style {
  border: none;
  box-shadow: 0 0 10px rgba(129, 131, 136, 0.7);
  -webkit-box-shadow: 0 0 10px rgba(129, 131, 136, 0.7);
  -moz-box-shadow: 0 0 10px rgba(129, 131, 136, 0.7);
}
</style>
